<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: '客户详情',
			size: '90%',
			appendToBody: true
		}"
		hide-footer
		@close="drawerClose"
		class="customer-detail-drawer"
	>
		<el-card shadow="never" :body-style="{ padding: 0 }">
			<el-row :gutter="20" class="pl-2 pr-2 pt-2" style="line-height: 1.8">
				<el-col :lg="6" :sm="12" :xs="24">
					<cl-customer
						class="customer"
						:gender="detail.cus_sex"
						:name="detail.cus_name"
						:mobile="detail.cus_mobile"
						:wechat="detail.cus_wx || '-'"
						:type="detail.cus_type"
						make-call
						:have-fan="detail.inherit_id"
						:avatar="detail.cus_img"
						@makeTel="makeTel"
						:compile="true"
						@openCompile="openCompile"
					/>
					<!-- tags -->
					<div class="tags-wrap">
						<div
							class="tags-wrap_list"
							v-for="(item, index) in detail.tag_name"
							:key="index"
						>
							{{ item.tname }}
						</div>
					</div>
				</el-col>
				<el-col :lg="6" :sm="12" :xs="24">
					<div >
					  <div class="label-height">事 业 部：{{ detail.biz_name || "-" }}</div>
					</div>
					<div >
						<div class="label-height">会员等级：{{ detail.cus_grade_name }}</div>
						<div class="icon-type" v-if="$auth('store_cusdetailindex_edit')"
								@click.stop.prevent="openCompile({name:'cus_grade_name',type:'会员等级'})">
						  <i class="custom-icon custom-icon-xiugai icon-type-icon" v-if="$auth('store_cusdetailindex_edit')"/>
					  </div>
					</div>
					<div >
						<div class="label-height">会 员 号：{{ detail.cus_id }}</div>
					</div>
					<div >
						<div class="label-height">所属部门：{{ detail.name_ascr_dept }}</div>
						<!-- <div class="icon-type" v-if="compile"
								@click.stop.prevent="openCompile({name:'name_ascr_dept',type:'所属部门'})">
						  <i class="custom-icon custom-icon-xiugai icon-type-icon" v-if="$auth('store_cusdetailindex_edit')"/>
					  </div> -->
					</div>
				</el-col>
				<el-col :lg="6" :sm="12" :xs="24">
					<div >
						<div class="label-height">品 牌：{{ detail.bra_name || "-" }}</div>
						<div class="icon-type" v-if="compile"
								@click.stop.prevent="openCompile({name:'bra_name',type:'所属品牌'})">
						  <i class="custom-icon custom-icon-xiugai icon-type-icon" v-if="$auth('store_cusdetailindex_edit')"/>
					  </div>
					</div>
					<div >
						<div class="label-height">所属门店：{{ detail.dept_name }}</div>
						<div class="icon-type" v-if="compile"
								@click.stop.prevent="openCompile({name:'dept_name',type:'所属门店'})">
						  <i class="custom-icon custom-icon-xiugai icon-type-icon" v-if="$auth('store_cusdetailindex_edit')"/>
					  </div>
					</div>
					<div >
						<div class="label-height">分 公 司：{{ detail.company_name || "-" }}</div>
					</div>
					<div >
						<div class="label-height">来源渠道：{{ detail.source_name }} - {{ detail.operator_user_name }}</div>
					</div>
				</el-col>
				<el-col :lg="6" :sm="12" :xs="24">
					<div class="flex flex-align-center flex-justify-end" style="height: 80px">
						<el-tooltip
							:content="
								isInherit
									? '重粉客户不能使用“维护”'
									: '新客不能使用“维护”，请使用“预约”'
							"
							placement="top"
							:disabled="!(isInherit || detail.cus_type != 2)"
						>
							<el-button
								v-auth="'store_cusdetail_maintain'"
								:class="{
									'is-disabled': isInherit || detail.cus_type != 2
								}"
								type="primary"
								@click="maintain"
								>维护</el-button
							>
						</el-tooltip>

						<el-tooltip
							:content="
								isInherit
									? '重粉客户不能使用“预约”'
									: '老客不能使用“预约”，请使用“维护”'
							"
							placement="top"
							:disabled="!(isInherit || detail.cus_type == 2)"
						>
							<el-button
								type="danger"
								:class="{
									'is-disabled': isInherit || detail.cus_type == 2
								}"
								@click="openAppoint(null)"
								v-auth="'store_cusdetailindex_yy'"
								>预约</el-button
							>
						</el-tooltip>
						<!-- <el-button type="success" @click="editMobile" v-auth="'store_customer_list'">编辑手机</el-button> -->
						<el-tooltip
							content="重粉客户不能使用“下定金”"
							placement="top"
							:disabled="!isInherit"
						>
							<el-button
								type="warning"
								@click="openEarnestForm()"
								:class="{
									'is-disabled': isInherit
								}"
								v-auth="'store_cusdetailindex_xdj'"
							>
								下定金
							</el-button>
						</el-tooltip>
						<el-dropdown
							class="ml-1"
							size="medium"
							@command="onCommand"
							v-auth="[
								'store_cusdetai_addcard',
								'store_cusdetailindex_dispatch',
								'store_cusdetailindex_gj',
								'store_cusdetailindex_edit',
								'store_cusdetailindex_del'
							]"
						>
							<el-button :disabled="isInherit">
								更多<i class="el-icon-arrow-down el-icon--right" />
							</el-button>

							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item
									command="addCard"
									v-if="$auth('store_cusdetai_addcard')"
									>加卡</el-dropdown-item
								>
								<!-- <el-dropdown-item
									command="dispatch"
									v-if="$auth('store_cusdetailindex_dispatch')"
									>派出</el-dropdown-item
								> -->
								<el-dropdown-item
									command="follow"
									v-if="$auth('store_cusdetailindex_gj')"
									>跟进</el-dropdown-item
								>
								<!-- <el-dropdown-item command="visit" v-auth="'store_cusdetailindex_hf'">回访</el-dropdown-item> -->
								<el-dropdown-item
									command="edit"
									v-if="$auth('store_cusdetailindex_edit')"
									>编辑</el-dropdown-item
								>
								<!-- <el-dropdown-item
									command="runoff"
									v-auth="'store_cusdetailindex_liushi'"
									>流失</el-dropdown-item
								> -->
								<el-dropdown-item
									command="del"
									v-if="$auth('store_cusdetailindex_del')"
									>删除</el-dropdown-item
								>
								<!-- <el-dropdown-item command="openAdvice" v-if="$auth('store_advice')"
									>客诉</el-dropdown-item
								> -->
								<!-- <el-button
									type="primary"
									@click="openAdvice()"
									v-if="$auth('store_cusdetailindex_xdj')"
									>客诉</el-button
								> -->
							</el-dropdown-menu>
						</el-dropdown>
					</div>
				</el-col>
			</el-row>
			<el-divider />
			<el-row :gutter="20" class="statistics flex pl-2 pr-2 pb-2">
				<!-- <div class="statistics-item">
					<div class="num">{{ detail.can_balance || 0 }}</div>
					<div>余额(元)</div>
				</div> -->
				<div class="statistics-item">
					<div class="num">{{ detail.deposit_total || 0 }}</div>
					<div>定金(元)</div>
				</div>
				<div class="statistics-item">
					<div class="num">{{ detail.rest_amount || 0 }}</div>
					<div>欠款(元)</div>
				</div>
				<div class="statistics-item">
					<div class="num">{{ detail.all_amount || 0 }}</div>
					<div>消费(元)</div>
				</div>
				<div class="statistics-item">
					<div class="num">{{ detail.kedan || 0 }}</div>
					<div>客单价(元)</div>
				</div>
				<!-- <div class="statistics-item">
					<div class="num">{{ detail.refund_amount || 0 }}</div>
					<div>已退款金额(元)</div>
				</div> -->
				<div class="statistics-item">
					<div class="num">{{ detail.appoint_num || 0 }}</div>
					<div>预约次数(次)</div>
				</div>
				<div class="statistics-item">
					<div class="num">{{ detail.to_shop || 0 }}</div>
					<div>到店次数(次)</div>
				</div>
				<div class="statistics-item">
					<div class="num">{{ detail.un_to_shop || 0 }}</div>
					<div>预约未到次数(次)</div>
				</div>
			</el-row>
		</el-card>
		<el-card shadow="never" class="mt-2" body-style="padding:0">
			<el-tabs v-model="currTab">
				<el-tab-pane
					v-for="tab in tabs"
					:key="tab.value"
					:label="tab.label"
					:name="tab.value"
					lazy
				>
					<div class="pa-2">
						<transition name="fade-transform" mode="out-in">
							<keep-alive>
								<component
									:is="tab.value"
									v-if="tab.value === currTab"
									:ref="tab.value"
									:detail="detail"
									@init="getCartList"
								/>
							</keep-alive>
						</transition>
					</div>
				</el-tab-pane>
			</el-tabs>
		</el-card>
		<advice ref="advice" />
		<cl-dispatch-drawer ref="dispatchDrawer" disabled-cus @confirm="refresh" />
		<earnest-form ref="earnestForm" :detail="detail" @confirm="earnestConfirm" />
		<follow-form ref="followForm" :detail="detail" @confirm="changeTab('interaction')" />
		<!-- <visit-form ref="visitForm" :detail="detail" @confirm="changeTab('interaction')" /> -->
		<customer-form ref="customerForm" :detail="detail" @confirm="customerComfirm" />
		<customer-form-one ref="customerFormOne" :detail="detail"  @confirm="customerComfirm"/>
		<cl-appoint-form
			ref="appointForm"
			:is-edit="!!cartlist.length && ![6, 7].includes(cartlist[0].status)"
			@confirm="changeTab('appoint')"
		/>
		<!-- <edit-mobile ref="editMobile" :detail="detail" @confirm="getDetail" /> -->
		<card-add ref="cardAdd" :detail="detail" @confirm="changeTab('card')" />
		<!-- 维护 -->
		<maintain-form ref="mainTain" @confirm="changeTab('appoint')" />
		<perfect-cus-info ref="perfectInfo" @confirm="refresh" />
		<!-- 电话 -->
		<make-call ref="makeCall" :detail="detail" />
	</cl-drawer>
</template>
<script>
//客诉
import Advice from "./components/advice.vue";
// 最新预约
import NewAppoint from "./components/new-appoint";
// 预约列表
import Appoint from "./components/appoint";
// 订单列表
import Order from "./components/order";
// 定金明细
import Earnest from "./components/earnest";
// 卡项明细
import Card from "./components/card";
// 积分明细
import Point from "./components/point";
// 客户信息
import Customer from "./components/customer";
// 互动详情
import Interaction from "./components/interaction";
// 定金表单
import EarnestForm from "./components/earnest-form";
// 跟进表单
import FollowForm from "./components/follow-form";
// 回访表单
// import VisitForm from "./components/visit-form";
// 编辑会员
import CustomerForm from "./components/customer-form";
import CustomerFormOne from "./components/customer-form-one";
// 编辑手机
// import EditMobile from "./components/edit-mobile";
// 加卡
import CardAdd from "./components/card-add";
//维护
import MaintainForm from "../maintain-form";
//改约日志
import Changerecords from "./components/change-about-records";
import PerfectCusInfo from "@/components/perfect-cus-info/index.vue";
import MakeCall from "./components/make-call";
const tabs = [
	{ label: "最新预约", value: "new-appoint" },
	{ label: "预约列表", value: "appoint" },
	{ label: "订单列表", value: "order" },
	{ label: "定金明细", value: "earnest" },
	{ label: "卡项明细", value: "card" },
	// { label: "积分明细", value: "point" },
	{ label: "客户信息", value: "customer" },
	{ label: "互动详情", value: "interaction" },
	{ label: "改约记录", value: "changerecords" }
];
export default {
	name: "cl-customer-detail",
	inject: ["$layout"],
	provide() {
		return {
			parent: this
		};
	},
	components: {
		Advice,
		NewAppoint,
		Appoint,
		Order,
		Earnest,
		Card,
		Point,
		Customer,
		Interaction,
		EarnestForm,
		FollowForm,
		// VisitForm,
		CustomerForm,
		CustomerFormOne,
		// EditMobile,
		CardAdd,
		MaintainForm,
		PerfectCusInfo,
		MakeCall,
		Changerecords
	},
	data() {
		return {
			compile:true, //是否显示图标
			detail: {},
			cartlist: [],
			currTab: "",
			tabs,
			makeCallShow: false,
			vmPhone: {},
			earnestTimer: null
			// isHaveyy: false //下定金后是否弹出预约
		};
	},
	watch: {
		currTab(v) {
			this.$nextTick(() => {
				this.$refs?.[v]?.[0]?.init?.();
				if (v == "customer") {
					this.refresh();
					return;
				}
			});
		},
		"$route.path"() {
			this.close();
		}
	},
	computed: {
		isInherit() {
			// const { inherit_id } = this.detail;
			const inherit_id = 0;
			return !!Number(inherit_id);
		}
	},
	// mounted() {
	// 	this.open();
	// },
	methods: {
		openCompile(obj){
			 let newObj = {
				  value:this.detail[obj.name],
					type:obj.type,
					name:obj.name
			 }
			 console.log(newObj)
			 this.$refs.customerFormOne.open(newObj);
		},
		open(data = {}, tab = "") {
			this.$store.commit("common/SET_VISIBLE_CUS_DETAIL", true);
			this.detail = { ...data };
			this.currTab = tab;
			this.$refs.drawer.create(() => {
				tab != "customer" && this.getDetail();
				this.getCartList();
			});
		},
		close() {
			this.drawerClose();
			this.$refs.drawer.close();
		},
		drawerClose() {
			this.tabs = tabs;
			this.currTab = "";
			this.$bus.$emit("close-customer");
			this.$store.commit("common/SET_VISIBLE_CUS_DETAIL", false);
		},
		openPerfectInfo() {
			this.$refs.perfectInfo.open(this.detail);
		},
		refresh() {
			this.getDetail();
			this.getCartList();
		},
		async getDetail() {
			const { cus_id } = this.detail;
			const { info, rest_order } = await this.$service.customer.detail({
				cus_id,
				biz_id: 0
			});
			this.detail = {
				...info,
				base_wx: atob(info.base_wx ?? "")
			};
		},
		//打开客诉
		openAdvice() {
			this.$refs.advice.open(this.detail);
		},
		// 获取预约订单列表
		async getCartList() {
			const { cus_id } = this.detail;
			const { list } = await this.$service.cart.page({
				cus_id,
				search_content: cus_id,
				search_type: 7,
				status: 1
			});
			// console.log("获取预约订单列表", list);
			this.cartlist = list;
			if (!list.length) {
				this.tabs = tabs.filter(v => v.value != "new-appoint");
				this.currTab == "new-appoint" && (this.currTab = "appoint");
			}
			!this.currTab && (this.currTab = this.tabs[0].value);
		},
		// 判断是否完善手机个门店
		isPerfectInfo(title) {
			const { cus_mobile, dept_id } = this.detail;
			if (!cus_mobile || !dept_id) {
				const promptStr =
					!cus_mobile && !dept_id
						? "“所属门店”和“手机号”"
						: !cus_mobile
						? "手机号"
						: "所属门店";
				this.confirm(`客户信息未完善，请完善客户的${promptStr}后再进行${title}!`).then(
					() => {
						// this.edit();
						this.openPerfectInfo();
					}
				);
				return false;
			}
			return true;
		},
		// 打开派单
		dispatch() {
			const { cus_id, biz_id, cus_name, cus_mobile } = this.detail;
			if (!cus_mobile) {
				this.confirm("客户信息未完善，请完善客户手机号").then(() => {
					// this.edit();
					this.openPerfectInfo();
				});
				return;
			}
			this.$refs.dispatchDrawer.open({
				cus_id,
				cus_biz_id: biz_id,
				appointed_biz_id: biz_id,
				cus_name,
				cus_mobile
			});
		},
		openAppointBoard(data) {
			// console.log(this.$route.path);
			this.$layout.openAppointBoard(data);
		},
		// 打开预约
		async openAppoint(data = {}) {
			console.log("打开预约");
			const { cus_id, biz_id, cus_name, cus_mobile, bra_id, cus_type, dept_id } = this.detail;
			let params = {
				biz_id: data?.biz_id || biz_id,
				dept_id: data?.dept_id || dept_id
			};
			if (this.isInherit || cus_type == 2) return;
			if (!this.isPerfectInfo("预约")) return;
			// console.info("this.cartlist111222333", this.cartlist)
			if (
				this.cartlist.length &&
				this.cartlist[0].status != 7 &&
				this.cartlist[0].status != 6
			) {
				this.confirm("当前已存在一笔预约，是否改约?").then(() => {
					this.$refs.appointForm.open(data ?? this.cartlist[0]);
					// this.openAppointBoard(params);
				});
				return;
			}
			//暂时不用
			// const { total } = await this.$service.deposit.userInfo({
			// 	cus_id
			// });
			// if (Number(total) <= 0) {
			// 	//需要下定金
			// 	this.confirm("需要先下定金！").then(() => {
			// 		this.openEarnestForm(true);
			// 	});
			// 	return;
			// }
			// this.openAppointBoard(params);
			this.$refs.appointForm.open({
				cus_id,
				biz_id,
				cus_name,
				cus_mobile,
				cus_type,
				dept_id,
				bra_id
			});
		},
		// 打开定金表单
		openEarnestForm(isHaveyy = false) {
			if (this.isInherit) return;

			// this.isHaveyy = isHaveyy;
			const { dept_id, bra_id } = this.detail;
			if (!this.isPerfectInfo("下定金")) return;
			console.log("打开定金表单");
			this.$refs.earnestForm.open(false, { dept_id, bra_id });
		},
		earnestConfirm(editing) {
			console.log("earnest", editing);
			this.changeTab("earnest");
			const { cus_type } = this.detail;
			clearTimeout(this.earnestTimer);
			this.earnestTimer = setTimeout(() => {
				if (cus_type == 2) {
					this.maintain();
					return;
				}
				this.openAppoint();
			}, 2 * 1000);
			// if (this.isHaveyy) {
			// 	this.openAppoint();
			// }
		},
		//维护
		maintain() {
			const { cus_type, biz_id, dept_id } = this.detail;
			if (this.isInherit || cus_type != 2) return;
			if (!this.isPerfectInfo("维护")) return;
			this.$refs.mainTain.open(this.detail);
			let params = {
				biz_id,
				dept_id
			};
			// this.openAppointBoard(params);
		},
		//拨打电话
		async makeTel() {
			this.$refs.makeCall.open();
		},
		changeTab(tab) {
			this.currTab = tab;
			this.$nextTick(() => {
				this.$refs[tab][0].init();
				this.getCartList();
			});
		},
		customerComfirm() {
			this.changeTab("customer");
			this.refresh();
		},
		// 更多
		onCommand(command) {
			this[command]();
		},
		// 加卡
		addCard() {
			this.$refs.cardAdd.open();
		},
		// 跟进
		follow() {
			this.$refs.followForm.open();
		},
		// 回访
		// visit() {
		// 	this.$refs.visitForm.open();
		// },
		// 编辑
		edit() {
			this.$refs.customerForm.open();
		},
		editOne(){

		},
		// 派单流失
		async runoff() {
			await this.confirm();
			const { cus_id } = this.detail;
			await this.$service.customer.runoff(cus_id);
			this.$message.success("流失成功");
			this.close();
		},
		// 删除
		async del() {
			await this.confirm();
			const { cus_id, biz_id } = this.detail;
			await this.$service.customer.del({ cus_id, biz_id });
			this.$message.success("操作成功");
			this.close();
		},
		editMobile() {
			this.$refs.editMobile.open();
		}
	}
};
</script>
<style lang="scss" scoped>
::v-deep {
	.customer {
		display: inline-block;
		.cus-avatar,
		.cl-avatar {
			width: 80px;
			height: 80px;
		}
		.cus-avatar .cus-gender {
			width: 20px;
			height: 20px;
		}
		.cus-info {
			line-height: 1.8;
		}
		.cus-name {
			margin-bottom: 4px;
			font-size: 16px;
		}
	}
	.el-divider {
		background: #ebeef5;
		margin: 20px 0;
	}
	.el-tabs__header {
		margin: 0;
	}
	.el-tabs__nav-wrap::after {
		height: 1px;
	}
	.el-tabs--top .el-tabs__item.is-top:nth-child(2),
	.el-tabs--top .el-tabs__item.is-bottom:nth-child(2) {
		padding-left: 20px;
	}
	.statistics {
		text-align: center;
		color: #7f7f7f;
		&-item {
			flex: 1;
			border-right: solid 1px $border-main;
			padding-top: 6px;
			padding-bottom: 10px;
			&:last-child {
				border-right: none;
			}
		}
		.el-col {
			border-right: solid 1px $border-main;
			padding-top: 6px;
			padding-bottom: 10px;
			&:last-child {
				border-right: none;
			}
		}
		.num {
			color: #333;
			font-size: 24px;
			// font-weight: bold;
		}
	}
}
.customer-detail-drawer {
	font-size: 14px;
	.tags-wrap {
		display: flex;
		align-items: center;
		&_list {
			line-height: 1.4;
			font-size: 12px;
			margin-right: 10px;
			padding: 4px 8px;
			border-radius: 50px;
			color: $color-primary;
			background-color: #f4ecfd;
		}
	}
}
.icon-type{
		margin-left: 6px;
		display: inline-block;
		vertical-align: middle;
    height: 24px;
		&-icon{
			font-size: 20px;
			line-height: 24px;
			color: #ABABAB;
		}
}
.label-height{
	height: 26px;
	display: inline-block;
}
</style>
